/**
 * 主题变量定义文件
 * Theme Variables Definition
 * 
 * 说明：
 * 1. 所有颜色值将从后端配置中动态加载
 * 2. 这里定义的是默认值（回退值）
 * 3. 实际运行时，会通过 JavaScript 动态设置这些 CSS 变量
 * 
 * @version 2.0
 * @date 2024-01-15
 */

:root {
  /* =====================================================
     背景色 (Background Colors)
     ===================================================== */
  
  /* 主背景色 - 用于页面主体背景 */
  --theme-bg-primary: #000000;
  
  /* 次级背景色 - 用于卡片、面板等容器 */
  --theme-bg-secondary: #121212;
  
  /* 卡片背景色 - 用于卡片容器 */
  --theme-bg-card: #1C1C1E;
  
  /* 输入框背景色 - 用于输入框、搜索框 */
  --theme-bg-input: #2c2c2c;
  
  /* 聊天气泡背景色 - 用于聊天消息气泡 */
  --theme-bg-bubble: #282828;

  /* =====================================================
     文字颜色 (Text Colors)
     ===================================================== */
  
  /* 主文字颜色 - 用于主要文字内容 */
  --theme-text-primary: #ffffff;
  
  /* 次级文字颜色 - 用于次要文字内容 */
  --theme-text-secondary: #E0E0E0;
  
  /* 辅助文字颜色 - 用于提示文字、占位符 */
  --theme-text-muted: #9e9e9e;
  
  /* 深色文字颜色 - 用于浅色背景上的深色文字 */
  --theme-text-dark: #4B4A4A;

  /* =====================================================
     主题色 (Theme Colors)
     ===================================================== */
  
  /* 主题色 - 主要品牌色，用于按钮、高亮等 */
  --theme-primary: #e91e63;
  
  /* 主题色深色 - 主题色的深色变体，用于悬停、激活状态 */
  --theme-primary-dark: #DB2777;
  
  /* 主题色浅色 - 主题色的浅色变体（当前项目使用） */
  --theme-primary-light: #FF4D6A;
  
  /* 次要主题色 - 辅助主题色，用于次要元素 */
  --theme-secondary: #f7b356;
  
  /* 强调色 - 用于特殊提示和强调 */
  --theme-accent: #F08A5D;

  /* =====================================================
     功能色 (Functional Colors)
     ===================================================== */
  
  /* 成功色 - 用于成功提示 */
  --theme-success: #52C41A;
  
  /* 错误色 - 用于错误提示 */
  --theme-error: #FF4D4F;
  
  /* 警告色 - 用于警告提示 */
  --theme-warning: #FFB700;

  /* =====================================================
     强调色 (Accent Colors) - 用于特殊UI元素
     ===================================================== */
  
  /* 信息色（蓝色）- 用于信息提示、链接、标签 */
  --theme-accent-info: #2196F3;
  
  /* 危险色（红色）- 用于删除按钮、危险操作 */
  --theme-accent-danger: #FF4D6A;
  
  /* 警告橙色 - 用于提示标签、会员标识、渐变 */
  --theme-accent-warning: #F9B872;
  
  /* 紫色强调色 - 用于高级会员、特殊标记 */
  --theme-accent-purple: #A78BFA;
  
  /* 信息色深色变体 - 用于悬停状态 */
  --theme-accent-info-dark: #1976D2;

  /* =====================================================
     衍生颜色 (Derived Colors) - 基于主色自动计算
     ===================================================== */
  
  /* 主题色悬停态 - 深色变体 */
  --theme-primary-hover: var(--theme-primary-dark);
  
  /* 背景悬停态 - 比次级背景稍亮 */
  --theme-bg-hover: #2A2A2A;
  
  /* 背景激活态 - 比悬停态更亮 */
  --theme-bg-active: #3A3A3A;
  
  /* 背景禁用态 - 灰色调 */
  --theme-bg-disabled: #1A1A1A;
  
  /* 成功色背景 - 淡绿色 */
  --theme-bg-success: rgba(82, 196, 26, 0.1);
  
  /* 警告色背景 - 淡黄色 */
  --theme-bg-warning: rgba(255, 183, 0, 0.1);
  
  /* 错误色背景 - 淡红色 */
  --theme-bg-danger: rgba(255, 77, 79, 0.1);
  
  /* 信息色背景 - 淡蓝色 */
  --theme-bg-info: rgba(33, 150, 243, 0.1);
  
  /* 主题色淡背景 - 用于高亮区域 */
  --theme-bg-primary-light: rgba(233, 30, 99, 0.1);
  
  /* 成功色文字 - 用于成功状态文本 */
  --theme-text-success: #52C41A;
  
  /* 警告色文字 - 用于警告状态文本 */
  --theme-text-warning: #FFB700;
  
  /* 错误色文字 - 用于错误状态文本 */
  --theme-text-error: #FF4D4F;

  /* =====================================================
     边框色 (Border Colors)
     ===================================================== */
  
  /* 主边框色 - 用于主要边框 */
  --theme-border-primary: #333333;
  
  /* 次边框色 - 用于次要边框、分隔线 */
  --theme-border-secondary: #2A2A2A;

  /* =====================================================
     渐变色 (Gradient Colors)
     ===================================================== */
  
  /* 主题渐变 - 主要渐变色 */
  --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
  
  /* 次要渐变 - 次要渐变色 */
  --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary), var(--theme-accent));
  
  /* VIP 渐变 - VIP 会员渐变色 */
  --theme-gradient-vip: linear-gradient(132deg, #FA8BB3 0%, #FFB5CF 39%, #ED5588 100%);

  /* =====================================================
     阴影 (Shadows)
     ===================================================== */
  
  /* 小阴影 */
  --theme-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  
  /* 中阴影 */
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  
  /* 大阴影 */
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  
  /* 主题色阴影 */
  --theme-shadow-primary: 0 4px 20px rgba(233, 30, 99, 0.4);

  /* =====================================================
     特殊颜色 (Special Colors)
     ===================================================== */
  
  /* VIP 金色 */
  --theme-vip-gold: #d4af37;
  
  /* VIP 银色 */
  --theme-vip-silver: #c0c0c0;
  
  /* VIP 铜色 */
  --theme-vip-bronze: #8da9db;
  
  /* 微信绿 */
  --theme-wechat: #07C160;
  
  /* 支付宝蓝 */
  --theme-alipay: #1677ff;

  /* =====================================================
     覆盖第三方组件变量 (Override Third-party Components)
     ===================================================== */
  
  /* Ant Design Mobile 主题变量覆盖 */
  --adm-color-primary: var(--theme-primary);
  --adm-color-success: var(--theme-success);
  --adm-color-warning: var(--theme-warning);
  --adm-color-danger: var(--theme-error);
}

/* =====================================================
   深色主题扩展 (Dark Theme Extension)
   注意：当前项目主要使用深色主题
   ===================================================== */

.dark-theme {
  /* 深色主题下的特殊处理 */
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

/* =====================================================
   主题切换过渡效果 (Theme Transition)
   ===================================================== */

:root,
.dark-theme {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 为需要过渡的元素添加类 */
.theme-transition {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

